//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用
// 文件名称：ConfirmDialog.js
// 创建时间：2016年09月07日
// 创建人员：mayu 
// 功能说明：确认对话框 android
//################################


import React, { Component, PropTypes } from 'react';
import { 
    StyleSheet, 
    View, 
    Modal, 
    TouchableOpacity, 
    Image, 
    Dimensions, 
    ScrollView ,
    Text,
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

import Colors from '../../common/colors';
import Images from '../../images';
const viewWidth = Dimensions.get('window').width;
const innerViewWith = viewWidth * 0.9;
const viewHeight = Dimensions.get('window').height;
 const innerViewHeight = viewHeight * 0.3;
const  otherHeight = viewHeight / 16;
export default class ConfirmDialog extends Component {
	constructor(props) {
		super(props);
		this.state = {
            isModalOpen: false,
            title: props.title,
            content: props.content,
            confirmLabel : props.confirmLabel,
            cancelLabel : props.cancelLabel,
            centerContent : props.centerContent,
            type : props.type
		};
        this.result = false;
	}

	componentWillReceiveProps(nextProps) {
        if (nextProps && nextProps.content != '') {
            this.setState({               
                title: nextProps.title,
                content: nextProps.content,
                confirmLabel : nextProps.confirmLabel,
                cancelLabel : nextProps.cancelLabel,
                centerContent : nextProps.centerContent,
                type : nextProps.type
            })
        }
	}


	componentWillUnmount() {

	}
    
    close() {
        this.setState({
            isModalOpen: false,
        });
        this.result = false;
        
        
    }
    
    open() {
        this.setState({
            isModalOpen: true,
        });
    }
    
    cancel() {
        this.result = false;
        
        if (this.props.cancelCallback) {
            this.props.cancelCallback(this.result);
        }
        
        this.close();
    }
    
    confirm() {
        this.result = true;
        
        if (this.props.confirmCallback) {
            this.props.confirmCallback(this.result);
        }
        
        this.close();
    }
    getButtonView(){
        if(this.state.type === 'confirmOnly' ){
            return (
                <View style={styles.container}>
                    <TouchableOpacity ref='confirm' key = 'confirm' onPress={this.confirm.bind(this)} style={[styles.bottomButton,]}>
                        <Text style={styles.bottomButtonText}>{ this.state.confirmLabel }</Text>
                    </TouchableOpacity>
                </View>
            );
        }
        else{
             return (
                 <View style={styles.container}>
                    <TouchableOpacity ref='cancel' key = 'cancel' onPress={this.cancel.bind(this)} style={[styles.bottomButton, {borderRightWidth:0.7,borderColor: Colors.highlightGreen,}]}>
                        <Text style={styles.bottomButtonText}>{ this.state.cancelLabel }</Text>
                    </TouchableOpacity>
                    <TouchableOpacity ref='confirm' key = 'confirm' onPress={this.confirm.bind(this)} style={[styles.bottomButton, {borderLeftWidth:0.7,borderColor: Colors.highlightGreen,}]}>
                        <Text style={styles.bottomButtonText}>{ this.state.confirmLabel }</Text>
                    </TouchableOpacity>
                 </View>
            );
        }
    }

    getIcon() {
        switch (this.props.iconType) {
            case 'none':
                return <View />;
            case 'info':
                return <Icon name={'question-circle-o'} style={{alignSelf: 'center', justifyContent: 'center', marginRight: 20,}} size={30} color={Colors.green} />;
            default:
                return <Image source={Images.MyActive} style={styles.headerbackicon} resizeMode={Image.resizeMode.contain} />;
        }
    }

	render() {      
		return (
			<Modal 
                animationType={'fade'} 
                visible={this.state.isModalOpen} 
                transparent={true}
                onRequestClose={()=>{this.setState({isModalOpen:false})}}
                >
                <View style={styles.tipContainer}>
                    <View style={[styles.tipInnerContainer, styles.closeView]}>
                        <View style={styles.titleContainer}>
                            <View style={styles.titleInnerContainer}>
                                <Text style={styles.titleText}>{ this.state.title }</Text>
                            </View>
                        </View>
                        <View style={styles.splitter}></View>
                        <View style={styles.content}>
                            
                                <View style={ styles.contentView }>
                                    {
                                        this.getIcon()
                                    }
                                    <Text style={ styles.contentText}>{this.state.content}</Text>
                                </View>
                            
                        </View>
                        <View style={styles.splitter}></View>
                        <View style={[styles.bottomButtonView, {height:otherHeight}]}>
                            { this.getButtonView() }
                        </View>
                    </View>
                </View>
            </Modal>
		);
	}
}

// <ScrollView style={styles.contentScrollView}>
// </ScrollView>

const styles = StyleSheet.create({
     container: {
        flexDirection: 'row',
        flex: 1,
       // backgroundColor: Colors.soiDetailBackground,
    },
    tipContainer: {
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent:'center',
        width:viewWidth,
        height:viewHeight,
    },
    tipInnerContainer: {
        borderRadius: 10,
        backgroundColor: '#FFFFFF',
        alignSelf: 'center',
        width:innerViewWith,
        paddingLeft: 12,
        paddingRight: 12,
        // height:innerViewHeight,
    },
    closeView:{
        // flex:1,
        marginLeft:8,
        marginRight:8,
    },
    titleContainer: {
        justifyContent:'center',
        flexDirection: 'row',
        height:otherHeight,
        margin:6
    },
    titleInnerContainer: {
        flex:12,
        justifyContent:'center',
    },
    titleText: {
        //fontWeight: 'bold',
        color: Colors.soiHeaderBack,
        alignSelf: 'center',
        fontSize: 20
    },
    closeButton: {
        position: 'absolute',
        top: 0,
        right: 0,
        alignSelf:'center',
        justifyContent:'center',
    },
    modalButton: {
        flex:1,
        alignSelf: 'stretch',
        alignItems: 'stretch',
    },
    splitter: {
        borderColor: Colors.highlightGreen,
        borderWidth: 0.5,
    },
    content: {
        // flex:1,
        flexDirection: 'row',
        justifyContent:'center',
        alignItems: 'center',
    },
    contentScrollView:{
        flex:1,
    },
    bottomButtonView: {
        flexDirection:'row',
        alignSelf: 'stretch',
        alignItems: 'stretch',
        margin:6
    },
    bottomButton: {
        flex: 1,
        alignItems: 'stretch',
        alignSelf: 'stretch',
        justifyContent: 'center',
    },
    bottomButtonText: {
        textAlign: 'center',
        //fontWeight: 'bold',
        color: 'black',
        fontSize: 18,
    },
    contentText: {
        fontSize: 16, 
        color : Colors.soiHeaderBack,
         alignSelf: 'center', 
         justifyContent : 'center', 
         lineHeight : 24,
         flex: 1,
    },
    contentView: {
        // flex: 1, 
        // margin: 10, 
        // marginLeft : 20, 
        //alignSelf: 'center', 
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        // borderWidth: 1,
        // borderColor: 'red',
        margin: 20,
        // marginRight: 20,
    },
    headerbackicon: {
        width: 20,
        height: 20,
    },
});
